<template>
  <div class="tiku-container">
    <div class="app">
      <el-card>
        <el-row
          style="text-align: right; marginRight: 15px; marginBottom: 10px"
        >
          <el-col
            ><el-button size="small"
            class="el-icon-edit" @click="$router.push('/questions/new')">新增试题</el-button
            ></el-col
          >
        </el-row>
        <el-form label-width="65px" :inline="true" size="normal">
          <el-form-item label="学科" prop="subjectID">
            <el-select v-model="formData.subjectID" placeholder="请选择" style="width: 202px" @change="changeFn">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

<<<<<<< HEAD
          <el-form-item label="目录" prop="directoryName">
            <el-select v-model="formData.directoryName" placeholder="请选择" style="width: 202px" @change="changeTag">
=======
          <el-form-item label="目录" prop="tags">
            <el-select v-model="formData.tags" placeholder="请选择" style="width: 202px" @change="changeTag">
>>>>>>> gxd
              <el-option
                v-for="item in directoryNameList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

<<<<<<< HEAD
          <el-form-item label="标签" prop="tagName">
            <el-select v-model="formData.tagName" placeholder="请选择" style="width: 202px" @change="changThree">
=======
          <el-form-item label="标签" prop="creatorID">
            <el-select v-model="formData.creatorID" placeholder="请选择" style="width: 202px">
>>>>>>> gxd
              <el-option
                v-for="item in tagList"
                :key="item.id"
                :label="item.tagName"
<<<<<<< HEAD
                :value="item.tagName"
=======
                :value="item.id"
>>>>>>> gxd
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="关键字" prop="keyword" >
            <el-input v-model="formData.keyword"></el-input>
          </el-form-item>

          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="formData.qustion" placeholder="请选择" style="width: 202px">
              <el-option
                v-for="item in qustionDiff"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="formData.difficult" placeholder="请选择" style="width: 202px">
              <el-option
                v-for="item in qustionDiff"
                :key="item.value"
                :label="item.label1"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="方向">
            <el-select v-model="formData.direction" placeholder="请选择" style="width: 202px">
             <el-option
                v-for="item in directionList"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="录入人" prop="creatorID">
            <el-select placeholder="请选择" style="width: 202px" v-model="formData.creatorID">
<<<<<<< HEAD
              <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"> </el-option>
=======
              <el-option> </el-option>
>>>>>>> gxd
            </el-select>
          </el-form-item>

          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="formData.remarks"></el-input>
          </el-form-item>

          <el-form-item label="企业简称" prop="shortName">
            <el-input v-model="formData.shortName"></el-input>
          </el-form-item>

          <el-form-item label="城市" prop="province">
            <el-select
              placeholder="请选择"
              style="width: 98px;"
              v-model="formData.province"
              @change="changeCity"
            >
              <el-option v-for="item in city" :key="item.id" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="" prop="city">
            <el-select placeholder="请选择" style="width: 98px" v-model="formData.city">
              <el-option v-for="item in capital" :key="item.id" :label="item" :value="item"> </el-option>
            </el-select>
          </el-form-item>
          <span style="marginLeft: 78px">
            <el-button size="small" @click="clearFn">清除</el-button>
<<<<<<< HEAD
            <el-button size="small" type="primary" @click="searchFn">搜索</el-button>
=======
            <el-button size="small" type="primary" @click="clearFn">搜索</el-button>
>>>>>>> gxd
          </span>
        </el-form>
        <table-change ref="TableChange"></table-change>
      </el-card>
    </div>
  </div>
</template>

<script>
import TableChange from "./components/table-change.vue";
<<<<<<< HEAD
import { getSubjectListApi, subjectTypeApi, tagsListApi, secondedDirectorysApi , userWriteInApi} from "@/api/choice";
=======
import { getSubjectListApi, subjectTypeApi, tagsListApi, secondedDirectorysApi } from "@/api/choice";
>>>>>>> gxd
import {provinces, citys} from '@/filters/chengshi.js'
export default {
  name:'FFFFFFFlaotou',
  components: { TableChange },
  data() {
    return {
      list: {},
     
      formData:{
        //  subjectID:'',  // 学科id
        //  directoryName:'', //目录
        //  tagName:'', //标签
        //  direction:'', //方向 
        //  difficult:'',  // 难度
        //  qustion:'',  //试题
        //  keyword:'', //关键字
        //  tags:'',
        //  creatorID:'',
        //  remarks:'',
        //  province:'',
        //  city:''
      },  
      city:[],
       capital:[],                                              
      directoryNameList: [],
      tagList: [],
<<<<<<< HEAD
      userList:[],
=======
>>>>>>> gxd
      directionList:[
      { value: "1",label:"o2o"},
      { value: "2",label:"外包服务"},
      { value: "3",label:"企业服务"},
      { value: "4",label:"互联网金融"},
      { value: "5",label:"企业咨询"},
      { value: "6",label:"互联网电子"},
      { value: "7",label:"商务其他"},
      { value: "8",label:"其他"}],
      qustionDiff: [
        {
          value: "1",
          label: "单选",
          label1: "简单",
        },
        {
          value: "2",
          label: "多选",
          label1: "一般",
        },
        {
          value: "3",
          label: "简答",
          label1: "困难",
        },
      ],
      queryData: {
        page: 1,
        pagesize: 10,
      },
<<<<<<< HEAD
      // uerData:{
      //   page: 1,
      //   pagesize: 10,
      //   keyword:''
      // }
=======
>>>>>>> gxd
    };
  },
  created() {
    this.initData(this.queryData);
    this.subjectType();
<<<<<<< HEAD
    this.getUserList()
=======
>>>>>>> gxd

    // 获取城市
    this.getList()
  },
  filter: {
    qutype(val) {
      if (val == 1) {
        return "单选";
      } else if (val == 2) {
        return "多选";
      } else {
        return "简答";
      }
    },
  },
  methods: {
    // 目录
    async initData() {
      const res1 = await getSubjectListApi(this.queryData);
      this.catelogList = res1.items;
      // this.directionList = res1.items;
      console.log(this.catelogList);
    },
    //学科
    async subjectType() {
<<<<<<< HEAD
       
     this.tagList = []
=======
>>>>>>> gxd
      const res = await subjectTypeApi(this.queryData);
      console.log(res);
      this.list = res.items;
    },
   // 二级目录关联 学科===》 目录===》 标签
   async changeFn(val){
<<<<<<< HEAD
    this.formData.directoryName = ''
    //  this.formData.tagName = '' 
    
=======
>>>>>>> gxd
     const res = await secondedDirectorysApi({
      subjectID:val
     })
     console.log(res);
     if(res.items.length == 0){
<<<<<<< HEAD
     this.directoryNameList = []
     this.formData.directoryName = ''
     this.formData.tagName = ''
      this.tagList = []
=======
     this.directoryNameList = {}
     this.formData.directoryName = ''
     this.formData.tagName = ''
      this.tagList = {}
>>>>>>> gxd
     } else{
      this.directoryNameList = res.items
     }
     
    },
<<<<<<< HEAD
    // 第二次change事件
   async changeTag(){
    this.tagList=[]
     const res = await tagsListApi({
=======
   async changeTag(){
       const res = await tagsListApi({
>>>>>>> gxd
        subjectID:this.formData.subjectID
       });
        if(res.items.length == 0){
     this.formData.tagName = ''
     } else{
        this.tagList = res.items;
<<<<<<< HEAD
      
     } 
    },
    changThree(val){
      
      this.formData.tagName = val
      // this.$set(this.formData, 'tagName', val)
      
=======
     }
     
>>>>>>> gxd
    },
    searchFn(){
      this.$refs.TableChange.initData(this.formData)
    },
    clearFn(){
      this.formData = {}
      this.$refs.TableChange.initData({page:1,pagesize:10})
      
    },

    getList(){
      this.city = provinces()
    },
    appList(city){
      this.capital = citys(city)
    },
    changeCity(city){
      this.appList(city)
<<<<<<< HEAD
    },

    async getUserList(){
      const {list} = await userWriteInApi({
        ...this.queryData,
        keyword:''
      })
      console.log(list);
      this.userList = list
=======
>>>>>>> gxd
    }
  },
};
</script>

<style>
.el-form-item__label {
  font-size: 13px;
}
.el-input__inner {
  height: 35px;
}
</style>
